<template>
  <div class="tableShopBox" :id="'tableShopBox'+index"><!--表格 商品信息组件-->
     	<div class="goodsBox" v-for="(item,index) in row" style="margin-bottom:10px" v-if="index=='0' || open">
	      <div class="img">
	        <el-image :src="item.goodsImage" fit="fill" v-image-preview="item.goodsImage"></el-image>
	      </div>
	      <div class="goodsRight">
	        <div class="goodsName color-444 ellipsis-item font-size-13" style="margin:7px 0 8px 0">{{item.goodsName}}</div>
	        <div class="goodsLabel d-flex">
	          <div class="color-999 d-flex margin-right-10 font-size-13">单价:{{item.salePrice}}</div>
	          <div class="color-999 d-flex margin-right-10 font-size-13">数量:{{item.goodsNum?item.goodsNum:'1'}}</div>
            <div class="color-999 d-flex font-size-13" v-if="item.skuName">规格:{{item.skuName}}</div>
	        </div>
	      </div>
	      <div class="shopMore" v-if="isMore && index=='0'" @click="handleOpen($event)">更多 <i :class="open?'el-icon-arrow-up':'el-icon-arrow-down'" style="color: #61997A;"></i></div>
	    </div>
  </div>


</template>

<script>
  import $ from 'jquery'
 export default {
   name: "tableShopBox",
   props: ['row','index'],
   data(){
     return{
     	isMore:false,
     	open:false,
     }
   },
   watch: {
     row () {
       if(this.row){
       	this.isMore = (this.row.length>1)?true:false;
       }
     },
   },
   mounted() {
   		if(this.row){
   			this.isMore = (this.row.length>1)?true:false;
   		}
   },
   methods:{
		handleOpen(event){
			this.open = !this.open;
      this.$nextTick(()=>{
        let height = Number(($('#tableShopBox'+this.index).css('height')).replace('px',''))+30;
        $('.el-table__fixed-body-wrapper tr').eq(this.index*2+1).css('height',height+'px');
      })

		}
   }
 }
</script>

<style lang="scss" scoped>
    .shopMore{
      cursor: pointer;
      display: flex;
      align-items: center;
      margin-left:10px;
      color: #61997A;
    }
</style>
